﻿@using Kevin.Shop.Business.Service.Entity.Helper
@section header
{
    <link href="~/Themes/RongJi/Style/base/css/comment.css" rel="stylesheet">

    <!--[if lt IE 9]>
        <script src="~/Themes/Common/assert/plugins/qiniu-1.0.7/demo/js/Respond-1.4.2/respond.min.js"></script>
    <![endif]-->


    <style>
     
    </style>
}
@section title
{
    发表评价
}
@section pagetitle
{
    发表评价
}
<div class="userCenterHeader">
    <span class="iconWrapper">
        <img src="~/Themes/RongJi/Style/base/imgs/icon_ping.png">
    </span>
    <h3>发表评价</h3>
    <br class="clearfix">
</div>
<div class="box">
    <div class="comment-container">
        <a href="~/Product/ProductDetail?prd=@Model.Product.ProductId" class="links">
            <span>
                <img src="@Model.Product.ImageNameSize125">
            </span>
            <label>
                <label class="table">
                    <div class="line1">
                        <span>@Model.Product.Title</span>
                    </div>
                    <div class="line2">
                        <span>￥@Model.Product.UnitPrice</span>
                    </div>
                    <div class="line3">
                        <span>@Model.Product.LineDescription</span>
                    </div>
                </label>
            </label>
        </a>
        <div class="star-line">
            <span>星级</span>
            <label class="re5" id="RatingLevel">
                <ul>
                    <li onclick="selectRating(1,this)"></li>
                    <li onclick="selectRating(2,this)"></li>
                    <li onclick="selectRating(3,this)"></li>
                    <li onclick="selectRating(4,this)"></li>
                    <li onclick="selectRating(5,this)"></li>
                </ul>
                <span class="retext">很好</span>
            </label>
            <input type="hidden" name="rating" id="txtRating" value="5">
            <input type="hidden" name="orderId" id="txtOrderNumber" value="@Model.OrderNumber">
            <input type="hidden" name="productId" id="txtProductId" value="@Model.Product.ProductId">
            <input type="hidden" id="domain" value="@WebClientContext.Current.FileServerDomain">
            <input type="hidden" id="uptoken" value="@WebClientContext.Current.FileFileServerUpToken">
        </div>
        <div class="textarea">
            <input type="text" placeholder="请输入标题" id="txtTitle">
            <input type="hidden" placeholder="优点" id="txtMeritText">
            <input type="hidden" placeholder="不足" id="txtFaultsText">
            <textarea placeholder="请留下您的评价" id="txtMemo"></textarea>
        </div>
        <div class="imageArea">
            <div>
                <span>晒单</span>
                <span>(最多可上传6张照片)</span>
            </div>
            <div class="clearfix">
                <ul id="reviewImageList" class="clearfix">
                    <li>
                        <div style="background:url(/Themes/Common/assert/plugins/qiniu-1.0.7/demo/upimg.png) no-repeat center center; background-size:contain;">
                            <div id="pickcontainer">
                                <a id="pickfiles" href="#">
                                </a>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>

        <div class="btn-group btn-group-justified btn-wrapper" role="group" aria-label="...">
            <div class="btn-group" role="group">
                <button type="button" id="btnCancel" class="btn">取消</button>
            </div>
            <div class="btn-group" role="group">
                <button type="button" class="btn btn-success" id="btnPublish">发表</button>
            </div>
        </div>
        <br class="clearfix">
    </div>
</div>


@section footer
{
    <script src="~/Themes/Common/assert/plugins/qiniu-1.0.7/demo/js/plupload/moxie.js"></script>
    <script src="~/Themes/Common/assert/plugins/qiniu-1.0.7/demo/js/plupload/plupload.dev.js"></script>
    @*<script src="~/Themes/Common/assert/plugins/qiniu-1.0.7/demo/js/plupload/plupload.full.min.js"></script>*@
    <script src="~/Themes/Common/assert/plugins/qiniu-1.0.7/demo/js/plupload/i18n/zh_CN.js"></script>
    <script src="~/Themes/Common/assert/plugins/qiniu-1.0.7/src/qiniu.js"></script>



    <script>
        function selectRating(num, elm) {
            $(elm).parent().parent().get(0).className = "re" + num + "";
            if (num == 1) {
                $('.retext', $(elm).parent().parent()).html("非常差");
            } else if (num == 2) {
                $('.retext', $(elm).parent().parent()).html("比较差");
            }
            else if (num == 3) {
                $('.retext', $(elm).parent().parent()).html("一般");
            }
            else if (num == 4) {
                $('.retext', $(elm).parent().parent()).html("比较好");
            } else if (num == 5) {
                $('.retext', $(elm).parent().parent()).html("很好");
            }
            $('input[name="rating"]').val(num);
        }
        $(function () {
            //让toolbar选中
            var $homeImg = $("#homeImg");
            var $categoryImg = $("#categoryImg");
            var $myaccountImg = $("#myaccountImg");
            var $searchImg = $("#searchImg");
            $homeImg.attr("src", "/Themes/RongJi/Style/base/imgs/f10.png");
            $categoryImg.attr("src", "/Themes/RongJi/Style/base/imgs/f2.png");
            $myaccountImg.attr("src", "/Themes/RongJi/Style/base/imgs/f3_c.png");
            $searchImg.attr("src", "/Themes/RongJi/Style/base/imgs/f4.png");


            //cancel comment
            $("#btnCancel").click(function () {
                window.location.href = '../myaccount/MyComment';
            });


            //publish comment
            $("#btnPublish").click(function () {
                var $rating = $("#txtRating").val();
                var $title = $.trim($("#txtTitle").val());
                var $memo = $("#txtMemo").val();
                var $meritText = $("#txtMeritText").val();
                var $faultsText = $("#txtFaultsText").val();
                var $orderNumber = $("#txtOrderNumber").val();
                var $productId = $("#txtProductId").val();
                var $reviewImages = '';

                $.each($('#reviewImageList li'), function (key, value) {
                    var imgKey = $(value).attr('data-key');
                    if (imgKey) {
                        $reviewImages += (imgKey + ',');
                    }
                });

                if ($title == "") {
                    KevinShop.MessageBox.Alert("请输入标题!");
                    return false;
                }
                if ($memo == "") {
                    KevinShop.MessageBox.Alert("请输入评价内容!");
                    return false;
                }


                var submitData = {
                    ProductId: $productId,
                    Title: $title,
                    Memo: $memo,
                    MeritText: $meritText,
                    FaultsText: $faultsText,
                    Rating: $rating,
                    OrderNumber: $orderNumber,
                    Images: $reviewImages
                };
                $.ajax({
                    type: "POST",
                    data: submitData,
                    dataType: "JSON",
                    url: "PublishCommentAjaxRequest",
                    success: function (response) {
                        if (response.Status) {
                            alert('评价成功！');

                            setTimeout(function () {
                                window.location.href = '../myaccount/MyComment';
                            }, 500);
                        }
                        else if (response.Status == false && response.ErrorMessage != null) {
                            alert(response.ErrorMessage);
                        }
                    },
                    error: function (err) {
                        alert(err.responseText);
                    }
                });
            });


            var uploader = Qiniu.uploader({
                runtimes: 'html5,flash,html4',
                browse_button: 'pickfiles',
                container: 'pickcontainer',
                max_file_size: '10mb',
                flash_swf_url: '/Themes/Common/assert/plugins/qiniu-1.0.7/demo/js/plupload/Moxie.swf',
                dragdrop: false,
                chunk_size: '4mb',
                uptoken: $('#uptoken').val(),
                // uptoken_url: $('#uptoken_url').val(),
                domain: $('#domain').val(),
                // downtoken_url: '/downtoken',
                // unique_names: true,
                // save_key: true,
                // x_vars: {
                //     'id': '1234',
                //     'time': function(up, file) {
                //         var time = (new Date()).getTime();
                //         // do something with 'time'
                //         return time;
                //     },
                // },
                filters: {
                    mime_types: [
                        { title: "Image files", extensions: "jpg" }
                    ],
                    max_file_size: "8mb",
                    prevent_duplicates: false
                },
                multi_selection: false,
                auto_start: true,
                init: {
                    'FilesAdded': function (up, files) {
                        KevinShop.Common.Loading.show(true);
                    },
                    'BeforeUpload': function (up, file) {

                    },
                    'UploadProgress': function (up, file) {

                    },
                    'UploadComplete': function () {
                        KevinShop.Common.Loading.hide();
                    },
                    'FileUploaded': function (up, file, info) {
                        addImage(up, file, info);
                    },
                    'Error': function (up, err, errTip) {
                        //alert(errTip);
                        alert("上传失败，请刷新页面重试");
                    },
                    'Key': function (up, file) {
                        var key = "review";

                        var orderNumber = $("#txtOrderNumber").val();
                        var productId = $("#txtProductId").val();
                        key = key + '/' + orderNumber + '/' + productId + '/' + (new Date()).valueOf();
                        // do something with key
                        return key
                    }
                }
            });

            function addImage(up, file, info) {
                var res = $.parseJSON(info);
                var url;
                if (res.url) {
                    url = res.url;
                } else {
                    var domain = up.getOption('domain');
                    url = domain + encodeURI(res.key);
                }

                url += '?imageView2/0/w/150'

                var html = '<li data-key="' + res.key + '">'
                        + '<div  style="background:url(' + url + ') no-repeat center center; background-size:contain;"'
                        + '  </div>'
                        + ' <span class="removeImg glyphicon glyphicon-remove"> </span>'
                        + '  </li>';



                $('#reviewImageList li:last-child').before(html);

                if ($('#reviewImageList li').length > 6) {
                    $('#reviewImageList li:last-child').hide();
                }
            }

            $('#reviewImageList').on('click', '.removeImg', function () {

                $(this).closest('li').remove();

                if ($('#reviewImageList li').length < 7) {
                    $('#reviewImageList li:last-child').show();
                }
            })

        });
    </script>
}